<template>
	<view>
		<!-- <uv-navbar title="历史记录" :autoBack="true" :placeholder="true" ></uv-navbar> -->
		<div
			style="background: url('/static/img/bg_1.png');background-size: 100% 100%;overflow: hidden;border-radius: 0 0 50rpx 50rpx;">
			<div style="height:50rpx"></div>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('货物入库')}}
			</div>
			<uv-sticky>
				<view class="place_site">
					<view class="name">
						{{$t('当前仓库')}}：
					</view>
					<view class="text">
						{{ lang == 'zh' ? item.name : item.name_ru }}
					</view>
					<!-- <image class="ico" src="/static/img/ico_line5.png" mode="widthFix"></image> -->
				</view>
			</uv-sticky>
		</div>


		<view class="car_tab">
			<view class="item" :class="carIndex == 0 ? 'hover' : ''" @click="clickCarTab(0)">
				{{$t('入库记录')}}
			</view>
			<view class="item" :class="carIndex == 1 ? 'hover' : ''" @click="clickCarTab(1)">
				{{$t('出库记录')}}
			</view>
		</view>

		<view class="history_list">
			<view class="history_item" v-for="item in list">
				<view class="title">
					<view class="name">
						{{ item.name }}
					</view>
					<view class="num">
						{{$t('件数')}}：{{ item.number }}
					</view>
				</view>
				<view class="item_info">
					<view class="name">
						{{$t('重量')}}(kg）
					</view>
					<view class="text">
						{{ item.weight }}
					</view>
				</view>
				<view class="item_info">
					<view class="name">
						{{$t('体积')}}(m³）
					</view>
					<view class="text">
						{{ item.volume }}
					</view>
				</view>
				<view class="item_info">
					<view class="name">
						{{$t('客户名称')}}
					</view>
					<view class="text">
						{{ item.name }}
					</view>
				</view>
				<view class="item_info">
					<view class="name">
						{{$t('入库时间')}}
					</view>
					<view class="text">
						{{ item.create_at }}
					</view>
				</view>
			</view>
		</view>

		<div class="center p-50">
			<u-empty v-if="list.length == 0" :text="$t('暂无数据')" textSize="28rpx" iconSize="100rpx"></u-empty>
		</div>





		<!-- <view class="footer_none"></view>
		<view class="footer_btn">
			<view class="btn" @click="addVehicle">
				{{$t('确定')}}
			</view>
		</view> -->

	</view>
</template>

<script>
import { stock_lists } from '@/api/basic.js'

export default {
	data() {
		return {
			carIndex: 0,
			item: {},
			lang: 'zh',
			list: []
		}
	},
	onLoad(options) {
		this.item = JSON.parse(uni.getStorageSync('items'))
		this.lang = uni.getStorageSync('lang')
		this.lists()
	},
	methods: {
		back() {
			// uni.navigateBack()
			uni.redirectTo({
			  url: '/pages/storeManage/storeManage'
			});
		},
		clickCarTab(index) {
			this.carIndex = index
			this.lists(index)
		},
		lists(index) {
			var that = this
			stock_lists({
				w_id: this.item.id,
				user_id: uni.getStorageSync('user_id'), 'page': 1, 'limit': 1000,
				'keyword': this.sarchVal,
				'type': index
			}).then(res => {
				that.list = res.data.data.data
			})
		}
	}
}
</script>

<style lang="scss">
page {
	background-color: #F6F7FB;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 18rpx;
}

.history_list {
	padding: 0 24rpx;

	.history_item {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		padding: 0 24rpx 14rpx;

		.item_info {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 40rpx;
			padding: 10rpx 0;

			.name {
				font-size: 26rpx;
				color: #888;
			}

			.text {
				font-size: 26rpx;
				color: #333;
			}
		}

		.title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 92rpx;
			border-bottom: 1rpx solid #F0F0F0;

			.num {
				font-size: 24rpx;
				line-height: 30rpx;
				color: #F53F3F;
			}

			.name {
				font-size: 32rpx;
				font-weight: bold;
				line-height: 40rpx;
			}
		}
	}
}

.car_tab {
	display: flex;
	align-items: center;
	height: 108rpx;
	padding: 0 10rpx;

	.item {
		font-size: 28rpx;
		line-height: 60rpx;
		padding: 0 30rpx;
		position: relative;

		&.hover {
			color: #278AFF;

			&::after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 50rpx;
				height: 4rpx;
				border-radius: 4rpx;
				background: #278AFF;
				margin-left: -25rpx;
			}
		}
	}
}

.place_site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	padding: 20rpx 30rpx;
	border-radius: 0 0 20rpx 20rpx;
	box-shadow: 0 6rpx 6rpx rgba(0, 0, 0, 0.04);

	.name {
		flex-shrink: 0;
		color: #666;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.text {
		width: 100%;
		color: #222;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.ico {
		flex-shrink: 0;
		width: 30rpx;
	}
}


.navbar_right {
	color: #278AFF;
	font-size: 24rpx;
	line-height: 40rpx;
}

.footer_none {
	width: 100%;
	height: 210rpx;
}

.footer_btn {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn {
		width: 100%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}
}

.footer_btn1 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 0 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);

	.btn_red {
		width: 100%;
		height: 110rpx;
		background: #FFB6B6;
		color: #FF1F1F;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}

	.btn_gray {
		width: 100%;
		height: 110rpx;
		background: #C6C6C6;
		color: #fff;
		text-align: center;
		line-height: 110rpx;
		font-size: 32rpx;
	}
}

.footer_big_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 0 0 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn_red {
		flex-shrink: 0;
		width: 240rpx;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: #FF6456;
		font-size: 32rpx;
	}

	.btn_yellow {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
		text-align: center;
		color: #fff;
		background: linear-gradient(90deg, #FF811E 0%, #FFBE7C 100%);
		font-size: 32rpx;
	}
}

.footer_btn2 {
	position: fixed;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 9;
	background: #fff;
	padding: 30rpx 30rpx 60rpx;
	box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.05);
	display: flex;
	align-items: center;
	justify-content: space-between;

	.btn {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		color: #fff;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		font-weight: 600;
	}

	.btn1 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #fff;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
		border: 1rpx solid #8C8C8C;
	}

	.btn2 {
		width: 48%;
		height: 90rpx;
		border-radius: 50rpx;
		background: #F7F7F7;
		color: #8C8C8C;
		text-align: center;
		line-height: 90rpx;
		font-size: 32rpx;
	}
}
</style>
